<template>
<div class="qckeditor-wrap">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>

<script>
//import "@ckeditor/ckeditor5-editor-classic/build/translations/zh-cn";
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Font from '@ckeditor/ckeditor5-font/src/font';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

export default {
    name: 'QCkeditor',
    data() {
        return {
            editor: ClassicEditor,
            editorData: "aaa",
            editorConfig: {
                language: "zh-cn",
                additionalLanguages: "all",
                placeholder: "请编辑商品详情!",
                plugins: [Font, CKFinder, Essentials, Paragraph, Heading, List, Bold, Italic, EasyImage, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, SimpleUploadAdapter, Base64UploadAdapter],
                toolbar: ['fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|', 'numberedList', 'bulletedList', '|', 'blockQuote', '|', 'ckfinder', 'imageUpload', '|', 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side'],
                fontFamily: {
                    options: [
                        'default',
                        'Ubuntu, Arial, sans-serif',
                        'Ubuntu Mono, Courier New, Courier, monospace'
                    ]
                },
                fontSize: {
                    options: [8, 9, 10, 11, 12, "default", 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72]
                },
                fontColor: {
                    colors: [{
                            color: 'hsl(0, 0%, 0%)',
                            label: 'Black'
                        },
                        {
                            color: 'hsl(0, 0%, 30%)',
                            label: 'Dim grey'
                        },
                        {
                            color: 'hsl(0, 0%, 60%)',
                            label: 'Grey'
                        },
                        {
                            color: 'hsl(0, 0%, 90%)',
                            label: 'Light grey'
                        },
                        {
                            color: 'hsl(0, 0%, 100%)',
                            label: 'White',
                            hasBorder: true
                        },

                        // ...
                    ]
                },
                fontBackgroundColor: {
                    colors: [{
                            color: 'hsl(0, 75%, 60%)',
                            label: 'Red'
                        },
                        {
                            color: 'hsl(30, 75%, 60%)',
                            label: 'Orange'
                        },
                        {
                            color: 'hsl(60, 75%, 60%)',
                            label: 'Yellow'
                        },
                        {
                            color: 'hsl(90, 75%, 60%)',
                            label: 'Light green'
                        },
                        {
                            color: 'hsl(120, 75%, 60%)',
                            label: 'Green'
                        },

                        // ...
                    ]
                },
                ckfinder: {
                    uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',
                    options: {
                        resourceType: 'Images'
                    }
                }

            },
        }
    },
}
</script>

<style lang="scss" scoped></style>
